<div class="page-title">
  <div class="row">
    <div class="col-xs-9">
      <h1>Configuration Execution Log</h1>
      <h2 *ngIf="execution">
        Execution {{execution.data.playbook_configuration.id}},
        state: {{execution.data.state}}
      </h2>
    </div>
    <div class="col-xs-3 main-button">
      <button
        type="button"
        class="btn btn-default"
        (click)="saveLogFile()"
        [disabled]="logFileDownloading"
      >
        Download
      </button>
      <button
        type="button"
        class="btn btn-primary"
        (click)="fetchData()"
      >
        Refresh
      </button>
    </div>
  </div>
</div>

<filter
  *ngIf="!shownServerId"
  (onChange)="fetchData()"
>
  <search criterion [target]="'name'"></search>
  <choice criterion
    [title]="'Result'"
    [target]="'result'"
    [values]="['ok', 'skipped', 'error']"
  ></choice>
  <search criterion
    [title]="'Server ID'"
    [target]="'server_id'"
  ></search>
</filter>
<pager [pagingData]="pagedData" (onChange)="fetchData($event)"></pager>

<div class="logs grid row" *ngIf="steps && steps.length">
  <div class="col-xs-12">
    <div class="grid-header">
      <div class="col-xs-2 name">Time</div>
      <div class="col-xs-3 name">Name</div>
      <div class="col-xs-3 name">Server ID</div>
      <div class="col-xs-1 name">Result</div>
      <div class="col-xs-3 name">Details</div>
    </div>
  </div>

    <div
      class="grid-line"
      *ngFor="let step of steps"
      [ngClass]="step.data.result"
    >
      <div class="col-xs-2">{{step.time_updated|date_time}}</div>
      <div class="col-xs-3" [title]="step.data.name">
        {{step.data.name}}
      </div>
      <div class="col-xs-3">
        <a [routerLink]="['/servers']" [fragment]="step.data.server_id">
          {{step.data.server_id}}
        </a>
      </div>
      <div class="col-xs-1 state">{{step.data.result}}</div>
      <div class="col-xs-3" [title]="step.data.error.msg">
        {{step.data.error.msg}}
      </div>
    </div>
</div>

<div *ngIf="!steps || !steps.length">No execution logs found</div>

<pager [pagingData]="pagedData" (onChange)="fetchData($event)"></pager>